<template>
    <d2-container :filename="filename">
        <template slot="header">
            <el-form
                    :inline="true"
                    :model="queryParam"
                    ref="form"
                    size="mini"
                    style="margin-bottom: -18px;">
                <el-form-item>
                    <el-button type="primary" icon="el-icon-plus" @click="add">添加</el-button>
                </el-form-item>

                <el-form-item>
                    <el-button type="danger" icon="el-icon-delete"
                               v-if="displayBatchDeleteBtn"
                               @click="handleBatchDelete">批量删除</el-button>
                </el-form-item>
            </el-form>
        </template>
        <!--table-->
        <el-table v-loading="listLoading" :data="tableData"
                  :stripe="true"
                  @selection-change="handleSelectionChange"
                  border fit highlight-current-row style="width: 100%;">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>

            <el-table-column label="编号" min-width="180" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column label="类型名称" min-width="200" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.name }}</span>
                </template>
            </el-table-column>

            <el-table-column label="属性数量" width="120" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.attr_count }}</span>
                </template>
            </el-table-column>

            <el-table-column label="参数数量" width="120" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.param_count }}</span>
                </template>
            </el-table-column>

            <el-table-column label="排序值" width="120" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.sorted }}</span>
                </template>
            </el-table-column>

            <el-table-column label="设置" width="240" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" plain icon="el-icon-tickets"
                               @click="goto(scope.row.id, 'SPEC')"
                               type="warning">规格列表
                    </el-button>
                    <el-button size="mini" plain icon="el-icon-tickets"
                               @click="goto(scope.row.id, 'PARAM')"
                               type="warning">参数列表
                    </el-button>
                </template>
            </el-table-column>

            <el-table-column label="操作" width="240" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" icon="el-icon-edit"
                               @click="edit(scope.row)"
                               type="primary">编辑
                    </el-button>

                    <el-button size="mini" icon="el-icon-delete"
                               @click="handleDelete(scope.row.id)"
                               type="danger">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <template slot="footer">
            <pagination v-show="total>0"
                        :total="total"
                        :page.sync="queryParam.current"
                        :limit.sync="queryParam.size"
                        @pagination="getList"/>
        </template>
        <el-dialog
                :title=textMap[dialogStatus]
                :visible.sync="dialogVisible">
            <el-form ref="rechargeForm" :model="attrCate" label-width="120px">
                <el-form-item label="菜单编号" prop="id" v-if="dialogStatus !== 'save'">
                    <el-input v-model="attrCate.id"
                              :disabled="dialogStatus !== 'create'">
                    </el-input>
                </el-form-item>

                <el-form-item label="类型名称" prop="name">
                    <el-input v-model="attrCate.name"
                              placeholder="请输入类型名称">
                    </el-input>
                </el-form-item>

                <el-form-item label="排序权重" prop="sorted">
                    <el-input v-model="attrCate.sorted"
                              placeholder="默认值为999">
                    </el-input>
                </el-form-item>

                <el-form-item v-if="dialogStatus === 'update'">
                    <el-button type="primary" @click="update" icon="el-icon-check">确认更新</el-button>
                    <el-button @click="onCancel" icon="el-icon-close">取消</el-button>
                </el-form-item>

                <el-form-item v-if="dialogStatus === 'save'">
                    <el-button type="primary" icon="el-icon-circle-plus-outline" @click="save">确认添加</el-button>
                    <el-button @click="onCancel" icon="el-icon-close">取消</el-button>
                </el-form-item>

            </el-form>

        </el-dialog>
    </d2-container>
</template>

<script>
    import Pagination from '@/components/Pagination'
    import {page, saveAttrCate, updateAttrCate, deleteAttrCate, batchDeleteAttrCate} from "@/api/goods/attr";

    export default {
        name: "goods-cate-attr",
        components: {
            Pagination
        },
        data() {
            return {
                filename: __filename,
                total: 0,
                queryParam: {
                    current: 1,
                    size: 10
                },
                listLoading: false,
                tableData: [],
                dialogVisible: false,
                dialogStatus: 'save',
                textMap: {
                    update: '编辑属性类别',
                    save: '创建新的属性类别'
                },
                attrCate: {
                    id: undefined,
                    name: undefined,
                    sorted: 999
                },
                selectedRows: [],
            }
        },
        created() {
            this.getList();
        },
        computed: {
            displayBatchDeleteBtn: function () {
                return this.selectedRows.length > 0;
            }
        },
        methods: {
            getList() {
                this.listLoading = true;
                page(this.queryParam).then(res => {
                    this.tableData = res.records;
                    this.total = parseInt(res.total);
                    this.listLoading = false;
                })
            },
            handleSelectionChange(rows) {
                this.selectedRows = rows;
            },
            goto(id, type) {
                this.$router.push('/goods/attr/list?cid=' + id + '&type=' + type)
            },
            update() {
                updateAttrCate(this.attrCate).then(res => {
                    this.$message({
                        dangerouslyUseHTMLString: true,
                        message: '更新【' + this.attrCate.name + '】成功',
                        type: 'success'
                    })
                })
            },
            save() {
                saveAttrCate(this.attrCate).then(() => {
                    this.$message({
                        dangerouslyUseHTMLString: true,
                        message: '添加【' + this.attrCate.name + '】成功',
                        type: 'success'
                    })
                })
            },
            edit(row) {
                this.attrCate = row;
                this.dialogVisible = true;
                this.dialogStatus = 'update';
            },
            add() {
                this.resetAttrCate();
                this.dialogVisible = true;
                this.dialogStatus = 'save';
            },
            handleDelete(id) {
                this.$confirm('此操作将永久删除该类型,是否继续?', '友情提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteAttrCate(id).then(res => {
                        if (res) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        } else {
                            this.$message({
                                type: 'warning',
                                message: '删除失败'
                            });
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleBatchDelete() {
                let ids = this.selectedRows.map(e => e.id).join(",");
                this.$confirm('此操作将永久删除该类型,是否继续?', '友情提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    batchDeleteAttrCate(ids).then(res => {
                        if (res) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        } else {
                            this.$message({
                                type: 'warning',
                                message: '删除失败'
                            });
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            resetAttrCate() {
                this.attrCate = {
                    id: undefined,
                    name: undefined,
                    sorted: 999
                }
            },
            onCancel() {

            }
        }
    }
</script>

<style scoped>

</style>
